<template>
	<view class="home clearfix">
		<cu-custom bgColor="bg-white justify-end">
			<block slot="content"></block>
			<block slot="right">
				<view class="wp100 px15 flex align-center justify-between">
					<view class="flex align-center search-box px15" @click="pushPage('/pages/goods/search')"><image src="/static/home/seo.png" class="block15"></image><text class="f12 text-info ml10">搜索商品</text></view>
				</view>
			</block>
		</cu-custom>
		<!-- notice -->
		<view class="gundong flex align-center pt15 bg-white">
			<view class="flex align-center justify-between" :style="[{ width: list.length *150 +'rpx' }]">
				<view class="flex flex-direction align-center ml15 gundongwidth" v-for="(item,index) in list" :key="index" @click="choice(item,index)">
					<text class="text-info" :class="{choice:index==storeindex}">{{item.name}}</text>
					<view class="class-choice mt5 bg-red" v-if="index==storeindex"></view>
					<view class="class-choice mt5 bg-white" v-else></view>
				</view>
			</view>
		</view>
		
		<view class="shangjiaSwitch">
			<view class="moren" 
			      v-for="(item, index) in titles" 
				  :key="item" 
				  @click="viewClick(index)"
				  :class="{active: currentIndex === index}">{{item}}</view>
			<!-- <view class="nearby" >附近商家</view>
			<view class="center">服务中心</view> -->
		</view>
		
		<scroll-view scroll-y="true" v-if="currentIndex === 0">
			<view class="flex flex-direction pb10 px15">
				<view class="px10 flex flex-direction pt10 pb10 bg-white mb10 radius-5" v-for="(item,index) in store" :key="index" @click="pushPage('/pages/store/index?id='+item.id)">
					<view class="flex align-center justify-between">
						<view class="flex">
							<image class="block70" :src="item.img"></image>
							<view class="flex flex-direction ml10 w170">
								<view class="ellipsis text-info ">{{item.name}}</view>
								<view class="mt5 f12 text-info flex align-center">共{{item.goodCount}}件商品</view>
							</view>
							<view class="">距您 xx km</view>
						</view>
					</view>
					<view class="shangjia-bottom">
						<view class="left">
							<image src="/static/fabu/daohang.png" mode=""></image>
							<text>太原市南内环西街</text>
						</view>
						<view class="guangguang discenter f12 right">进店逛逛</view>
					</view>
					
					<!-- <view class="mt10  flex align-center">
						<view v-for="(i,index) in item.goodPics" :key="index" class="wp33" :class="'picindex'+index">
							<image :src="i.pic" class="block105 radius-5" mode=""></image>
						</view>
					</view> -->
				</view>
			</view>
		</scroll-view>
		
		<scroll-view scroll-y="true" v-else>
			<view class="flex flex-direction pb10 px15">
				<view class="px10 flex flex-direction pt10 pb10 bg-white mb10 radius-5" v-for="(item,index) in store" :key="index" @click="pushPage('/pages/store/index?id='+item.id)">
					<view class="flex align-center justify-between">
						<view class="flex">
							<image class="block70" :src="item.img"></image>
							<view class="flex flex-direction ml10 w170">
								<view class="ellipsis text-info ">{{item.name}}</view>
								<view class="mt5 f12 text-info flex align-center">共{{item.goodCount}}件商品</view>
							</view>
							<view class="">距您 xx km</view>
						</view>
					</view>
					<view class="shangjia-bottom">
						<view class="left">
							<image src="/static/fabu/daohang.png" mode=""></image>
							<text>太原市南内环西街</text>
						</view>
						<view class="guangguang discenter f12 right">去看看</view>
					</view>
					
					<!-- <view class="mt10  flex align-center">
						<view v-for="(i,index) in item.goodPics" :key="index" class="wp33" :class="'picindex'+index">
							<image :src="i.pic" class="block105 radius-5" mode=""></image>
						</view>
					</view> -->
				</view>
			</view>
		</scroll-view>
		
	</view>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
	data() {
		return {
			storeindex:0,
			list:[],
			store:[],
			titles: ["附近商家", "服务中心"],
			currentIndex: 0
		}
	},
	onShow() {
		// this.classactive=this.storetype
		this.clearStore()
		this.getData()
	},
	computed:{
		...mapState(['storetype'])
	},
	methods: {
		...mapActions(['setStoretype']),
		async getData() {
			let {data} = await this.$http.post('store.index', {}, {tipConfig: { storeLoading: true } })
			this.list=data
			this.getStore()
		},
		async getStore() {
			if (this.finish) return
			let {
				data:{stores}
			} = await this.$http.post('store.storename', { page: this.page,typeId:this.list[this.storeindex].id },{tipConfig: { storeLoading: true, isSuccessTip: false }})
			this.finish = stores.length < 20
			!this.finish && (this.page += 1)
			this.store = [...this.store, ...stores]
		},
		
		clearStore(){
			this.store=[]
			this.finish=false
			this.page=1
		},
		choice(item,index){
			this.storeindex=index
			this.clearStore()
			this.getStore()
			// this.setStoretype(this.classactive)
			// this.getData()
		},
		viewClick(index) {
			this.currentIndex = index;
		}
	}
}
</script>

<style lang="less">
.gundong{
	width: 100%;
	overflow-x: scroll;
}
.guangguang{
	width: 130rpx;
	height: 50rpx;
	border-radius: 60rpx;
	border: 1rpx solid #D73329;
	color: #D73329;
}
.gundongwidth{
	width: 150rpx;
}
.choice{
	color: #ea2e0d;
}
.class-choice{
	width: 57rpx;
	height: 9rpx;
}
.block105{
	width: 210rpx;
	height: 210rpx;
}
.block-box{
	width: 400rpx;
}
.search-box {
	width: 690rpx;
	height: 66rpx;
	border-radius: 60rpx;
	background-color: #F6F6F6;
}
.picindex0{
	width: 33.3%;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.picindex1{
	width: 33.3%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.picindex2{
	width: 33.3%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}


.shangjiaSwitch {
	height: 40px;
	display: flex;
	justify-content: space-around;
	align-items: center;
	padding: 26px 0;
	background: #fff;
	margin: 10px 16px 0 16px;
	border-bottom: 1px solid #f2f2f2;
	.moren{
		padding: 6px 16px;
		background: #ccc;
		color: #fff;
		border-radius: 15px;
	}
	.active {
		background: #e54d42;
	}
}

.shangjia-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	
	.left {
		margin: 20rpx 0;
		image {
			width: 32rpx;
			height: 32rpx;
			margin-top: 16rpx;
		}
	}
}

.block70 {
	width: 140rpx;
	height: 140rpx;
}
.w170 {
	width: 340rpx;
}
</style>
